import React, { useState } from 'react'
import './shou.css'
import { NavBar, Toast, SearchBar, Swiper } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close, Location, Message } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
const list = [
    '../imgs/lun1.png',
    '../imgs/lun2.png',
    // '../imgs/lun1.png',
]

export default function Shou() {
    const nav = useNavigate()
    return (
        <div className='shou'>
            <NavBar
                back={
                    <>
                        <Location />
                    </>
                }
                right={
                    <span className="flex-center" onClick={(e) => Toast.show('icon')}>
                        <Message />
                    </span>
                }
                onBackClick={() => { nav('/address') }}
            >
                <SearchBar shape="round" maxLength={5} />
            </NavBar>
            {/* 轮播 */}
            <div className="demo-box" style={{ height: 150 }}>
                <Swiper
                    autoPlay
                    loop
                    slideSize={500}
                    indicator
                    style={{
                        '--nutui-indicator-color': '#426543',
                        '--nutui-indicator-dot-color': '#426ddd',
                    }}
                >
                    {list.map((item, index) => {
                        return (
                            <Swiper.Item key={item}>
                                <img src={list[index]} alt={list[index]} draggable={false} style={{ width: '360px', height: '100%', borderRadius: '15px', marginLeft: '26px' }} />
                            </Swiper.Item>
                        )
                    })}
                </Swiper>
            </div>
        </div>
    )
}
